<template>
  <div id="wrapper">
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="primary">持续交付月报</el-col>
    </el-row>
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
    </el-row>

    <el-row class="choose bgColor">
      <el-col :xs="24" :sm="24" :lg="24">
        <el-radio-group v-model="radio" class="flex-box">
          <el-radio :label="1" class="flexEl text-center" v-if="isCompany" >集团</el-radio>
          <el-radio :label="2" class="flexEl el">
            事业群
            <el-select :disabled="radio !== 2" style="width: 20%;margin-left: 6px;" v-model="selectedGroup" placeholder="请选择事业群" clearable filterable>
              <el-option v-for="item in group_selector" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-radio>         
        </el-radio-group>
        <div class="time">
          月份选择:
          <el-date-picker
            v-model="value1"
            @change="changeTime"
            type="month"
            format="yyyy 年 MM 月"
            value-format="yyyy-MM"
            placeholder="请选择月份">
          </el-date-picker>
        </div>
        <el-button @click="toNewReport" type="primary" class="newReport">新增报告</el-button>
      </el-col>
    </el-row> 
    <el-table 
      class="marT"
      :data="initTableList.slice((tableCurrent-1)*tableSize, tableCurrent*tableSize)" 
      :border="true"
      :header-cell-style="{background:'#eef1f6'}"
      style="width:100%;padding: 20px">
        <el-table-column align="center" property="month" label="日期" width="200"></el-table-column>
        <el-table-column align="center" property="group_name" label="组织" width="250"></el-table-column>
        <el-table-column align="center" property="creator" label="创建人" width="200"></el-table-column>
        <el-table-column align="center" property="create_time" label="创建时间" width="250"></el-table-column>   
        
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div class="box">
              <div class="details" @click="toDetails(scope.row.id)">查看详情</div>
              <div class="send-box" v-show="isSend">
                <el-button @click="sendWay(scope.row.id)" type="primary" round>发送到飞书</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
    </el-table>
    <el-pagination
      v-show="tableTotal > 10"
      background
      layout="prev, pager, next"
      :page-size="tableSize"                                       
      @size-change="tableSizeChange"
      @current-change="tableCurrentChange"
      :current-page="tableCurrent"                                         
      style="text-align: center"
      :total="tableTotal">
    </el-pagination>
    <el-dialog
      ref="dialog"
      :title="'新增持续交付月报'"
      :visible.sync="table"
      width="100%"
      style="margin: auto"
      >
      <transition name="fade">
        <div v-show="isShowTop" class="toTop" @click="toTop">
          <el-image
            style="width: 50px; height: 50px"
            :src="imgUrl"
            fit="cover"></el-image>
        </div>
      </transition>
      <div ref="top">
      <el-row class="choose bgColor">
        <el-col :xs="24" :sm="24" :lg="24">
          <el-radio-group v-model="radio" class="flex-box">
            <el-radio :label="1" class="flexEl text-center" v-if="isCompany">集团</el-radio>
            <el-radio :label="2" class="flexEl el">
              事业群
              <el-select :disabled="radio !== 2" style="width: 20%;margin-left: 6px;" v-model="selectedGroup" placeholder="请选择事业群" clearable filterable>
                <el-option v-for="item in group_selector" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-radio>         
          </el-radio-group>
          <div class="time">
            月份选择:
            <el-date-picker
              v-model="value1"
              @change="changeTime"
              type="month"
              format="yyyy 年 MM 月"
              value-format="yyyy-MM"
              placeholder="请选择月份">
            </el-date-picker>
          </div>
          <el-button class="newReport" v-show="!pdfStatus" @click="boforePdf" type="primary" icon="el-icon-download">编辑报告</el-button>
          <el-button class="newReport" v-show="pdfStatus" @click="initSave" type="primary" icon="el-icon-success">保存报告</el-button>
        </el-col>
      </el-row>
      </div>
      <div>
        <!-- <div class="line-chart marT">
          <el-row>
            <el-col :xs="24" :sm="24" :lg="24">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">指标趋势</div>
                  <el-select @change="exchange" v-model="targetValue" style="float: right; padding: 3px 0" filterable clearable placeholder="请选择指标类型">
                    <el-option
                      v-for="(item, index) in targetSelect"
                      :key="index"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </div>

                <div>
                  <ve-line 
                    ref="vline"                  
                    :data="targetData" 
                    :extend="chartExtend"
                    :settings="chartSettings">
                  </ve-line>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div> -->
        <el-divider content-position="left">月报汇总</el-divider>
        <div class="marT chart-area" style="padding: 0 20px">
          <el-input
            type="textarea"
            maxlength="1000"            
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入您的总结"
            v-model="content">
          </el-input>
        </div>

        <el-divider content-position="left">项目导入情况</el-divider>
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :lg="12">
            <div class="total">
              <el-card class="marT box-card m-b" style="margin-bottom: 20px;" shadow="never">
                <div slot="header" class="clearfix">
                    <div style="float: left; padding: 10px 0">项目新增导入趋势</div>                              
                </div>
                <el-row>
                  <el-col :xs="24" :sm="24" :lg="24">
                    <ve-line
                      :data="lineChartData"
                      :settings="lineChartSettings"
                      :legend-visible="true"             
                      :data-zoom="dataZoom"
                    ></ve-line>                                        
                  </el-col>
                </el-row>

                <el-input
                  class="marT"
                  type="textarea"
                  maxlength="1000"            
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入您的总结"
                  v-model="project_suggest">
                </el-input>
              </el-card>
            </div>
          </el-col>

          <el-col :xs="24" :sm="24" :lg="12">
            <div class="total">
              <el-card class="marT box-card m-b" style="margin-bottom: 20px;" shadow="never">
                <div slot="header" class="clearfix">
                    <div style="float: left; padding: 10px 0">devops系统新增导入趋势</div>                              
                </div>
                <el-row>
                  <el-col :xs="24" :sm="24" :lg="24">
                    <ve-line           
                      :data="devops_month_trend"
                      :settings="settings"                                
                      :data-empty="devopsLineEmpty"
                      :loading="devopsLineLoading"
                      :data-zoom="dataZoom">
                    </ve-line>                             
                  </el-col>
                </el-row>
                <el-input
                  class="marT"
                  type="textarea"
                  maxlength="1000"            
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入您的总结"
                  v-model="devops_suggest">
                </el-input>
              </el-card>
            </div>
          </el-col>
        </el-row>

        <el-divider content-position="left">研发质量</el-divider>     
        <div class="marT chart-area">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">任务延期率</div>
                </div>
                <ve-line
                  class="bgColor"
                  :colors="color" 
                  :data="overdueData" 
                  :extend="chartExtend"
                  :settings="chartSettings">
                </ve-line>
            </el-card>
              
            </el-col>

            <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">git log检查一次通过率</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :colors="color"
                  :data="git_log_pass_rate" 
                  :extend="chartExtend"
                  :settings="chartSettings">
                </ve-line>
            </el-card>
              
            </el-col>

            <el-col :xs="24" :sm="24" :lg="8">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">圈复杂度</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :colors="color"
                  :data="complexityData" 
                  :extend="chartComplexity"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div class="marT chart-area">
          <el-row :gutter="10"> 
            <el-col :xs="24" :sm="24" :lg="8">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">评审缺陷密度</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :colors="color"
                  :data="defectData" 
                  :extend="chartDefectDensity"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col> 

            <el-col :xs="24" :sm="24" :lg="8">
              <el-card class="box-card m-b" shadow="never">
                  <div slot="header" class="clearfix" style="vertical-align:middle">
                    <div style="float: left; padding: 10px 0">评审有效比率</div>
                  </div>
                  <ve-line
                    class="bgColor" 
                    :colors="color"
                    :data="effectiveData" 
                    :extend="chartExtend"
                    :settings="chartSettings">
                  </ve-line>
              </el-card>         
            </el-col>

            <el-col :xs="24" :sm="24" :lg="8">
              <el-card class="box-card m-b" shadow="never">
                  <div slot="header" class="clearfix" style="vertical-align:middle">
                    <div style="float: left; padding: 10px 0">Bug degrade比例</div>
                  </div>
                  <ve-line
                    class="bgColor"
                    :colors="color" 
                    :data="bug_degrade_rate" 
                    :extend="chartExtend"
                    :settings="chartSettings">
                  </ve-line>
              </el-card>         
            </el-col>         
          </el-row>
        </div>

        <div class="marT chart-area">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :lg="8">
              <el-card class="box-card m-b" shadow="never">
                  <div slot="header" class="clearfix" style="vertical-align:middle">
                    <div style="float: left; padding: 10px 0">Bug 超期未解决比例</div>
                  </div>
                  <ve-line
                    class="bgColor" 
                    :colors="color"
                    :data="bug_overtime_rate" 
                    :extend="chartExtend"
                    :settings="chartSettings">
                  </ve-line>
              </el-card>         
            </el-col>

            <el-col :xs="24" :sm="24" :lg="8">
              <el-card class="box-card m-b" shadow="never">
                  <div slot="header" class="clearfix" style="vertical-align:middle">
                    <div style="float: left; padding: 10px 0">无效Bug比例</div>
                  </div>
                  <ve-line
                    class="bgColor" 
                    :colors="color"
                    :data="invalid_bug_rate" 
                    :extend="chartExtend"
                    :settings="chartSettings">
                  </ve-line>
              </el-card>         
            </el-col>

            <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">日自动化测试执行次数(DB)</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :colors="color"
                  :data="day_daily_test_count" 
                  :extend="chartComplexity"
                  :settings="chartSettings2">
                </ve-line>
            </el-card>
              
            </el-col>
          </el-row>
        </div>

        <div class="marT chart-area">
          <el-row :gutter="10">        
            <el-col :xs="24" :sm="24" :lg="8">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">日自动化测试执行次数(VB)</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :colors="color"
                  :data="day_verify_test_count" 
                  :extend="chartComplexity"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <el-form :model="ruleForm" :rules="ruleForm.rules" ref="ruleForm">
          <div ref="quality" class="quality-table">
            <el-row class="bgColor marT">
              <el-col :xs="24" :sm="24" :lg="24">
                  <div class="ibox-title pad">研发质量</div>

                  <div class="table mar">
                    <el-table
                      :data="qualityData"
                      :row-class-name="tableRowClassName"
                      :header-cell-style="{background:'#eef1f6'}"
                      style="width: 100%">
                      <el-table-column
                          align="center"
                          type="index"                                
                          label="编号"
                          width="40">
                          <template slot-scope="scope">
                              <span>{{ scope.$index + 1 + qualitySize*(qualityCurrent - 1) }}</span> 
                          </template>
                      </el-table-column>

                      <el-table-column 
                          align="center"
                          label="分类"
                          prop="classify"
                          :width="pdfStatus ? 120 : ''"
                          >                   
                      </el-table-column>

                      <el-table-column 
                          align="center"
                          label="统计指标"
                          prop="name"
                          :width="pdfStatus ? 150 : ''">
                      </el-table-column>

                      <el-table-column 
                          align="center"
                          label="公司目标"
                          :width="pdfStatus ? 120 : ''"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.company_indicator.value != 0">
                              <span v-if="scope.row.company_indicator.operator == 0">> {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                              <span v-else-if="scope.row.company_indicator.operator == 1">< {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                              <span v-else-if="scope.row.company_indicator.operator == 2">>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                              <span v-else-if="scope.row.company_indicator.operator == 3"><= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                              <span v-else>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                            </div>
                            <div v-else></div>
                          </template>
                      </el-table-column>
                      <el-table-column :label="labelChoose + '平均'" align="center">
                        <el-table-column
                            v-for="(item, idx) in qualityTable[0]" 
                            :key="idx"                         
                            align="center"
                            :label="item.month"
                            :width="pdfStatus ? 100 : ''"
                            >
                            <template slot-scope="scope">                  
                              <div>
                                <span style="color: green;" v-if="scope.row.group_indicator[idx].reach_standard">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                                <span v-else style="color: red;">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                              </div>
                            </template>
                        </el-table-column>
                      </el-table-column>

                      <el-table-column
                        v-if="pdfStatus"
                        fixed="right"
                        label="分析/建议"
                        align="center">
                        <template slot-scope="scope">
                          <el-input
                            v-if="inputStatus"
                            type="textarea"                        
                            placeholder="请输入分析/建议"
                            v-model="scope.row.comments">
                          </el-input>
                          <div v-else>{{ scope.row.comments }}</div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
              </el-col>
            </el-row>
          </div>
          
          <el-divider content-position="left">研发效率</el-divider>
          <el-row class="marT" :gutter="10">
            <el-col :xs="24" :sm="24" :lg="8">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">代码生产率(Patch)</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :colors="color"
                  :data="patchData" 
                  :extend="chartComplexity"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :lg="8">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">代码生产率(有效代码行数)</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :colors="color"
                  :data="effectiveCodeData" 
                  :extend="chartComplexity"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :lg="8">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">缺陷解决效率(日平均)</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :colors="color"
                  :data="bugfixEffectData" 
                  :extend="chartComplexity"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col>
          </el-row>

          <el-row class="marT" :gutter="10">
            <el-col :xs="24" :sm="24" :lg="8">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">缺陷解决时长(日平均)</div>
                </div>
                <ve-line
                  class="bgColor"
                  :colors="color" 
                  :data="bugfixCostData" 
                  :extend="chartComplexity"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :lg="8">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">平均构建时长(DB)</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :colors="color"
                  :data="avg_daily_duration" 
                  :extend="chartTime"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :lg="8">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">平均构建时长(RB)</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :colors="color"
                  :data="avg_release_duration" 
                  :extend="chartTime"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col>
          </el-row>

          <div class="marT">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :lg="8">
                <el-card class="box-card m-b" shadow="never">
                  <div slot="header" class="clearfix" style="vertical-align:middle">
                    <div style="float: left; padding: 10px 0">平均构建时长(VB)</div>
                  </div>
                  <ve-line
                    class="bgColor" 
                    :colors="color"
                    :data="avg_verify_duration" 
                    :extend="chartTime"
                    :settings="chartSettings2">
                  </ve-line>
                </el-card>
              </el-col>

              <el-col :xs="24" :sm="24" :lg="8">
                <el-card class="box-card m-b" shadow="never">
                  <div slot="header" class="clearfix" style="vertical-align:middle">
                    <div style="float: left; padding: 10px 0">平均构建等待时长(DB)</div>
                  </div>
                  <ve-line
                    class="bgColor" 
                    :colors="color"
                    :data="avg_daily_queue_time" 
                    :extend="chartTime"
                    :settings="chartSettings2">
                  </ve-line>
                </el-card>
              </el-col>

              <el-col :xs="24" :sm="24" :lg="8">
                <el-card class="box-card m-b" shadow="never">
                  <div slot="header" class="clearfix" style="vertical-align:middle">
                    <div style="float: left; padding: 10px 0">平均构建等待时长(RB)</div>
                  </div>
                  <ve-line
                    class="bgColor"
                    :colors="color" 
                    :data="avg_release_queue_time" 
                    :extend="chartTime"
                    :settings="chartSettings2">
                  </ve-line>
                </el-card>
              </el-col>
            </el-row>
          </div>

          <div class="marT">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :lg="8">
                <el-card class="box-card m-b" shadow="never">
                  <div slot="header" class="clearfix" style="vertical-align:middle">
                    <div style="float: left; padding: 10px 0">平均构建等待时长(VB)</div>
                  </div>
                  <ve-line
                    class="bgColor" 
                    :colors="color"
                    :data="avg_verify_queue_time" 
                    :extend="chartTime"
                    :settings="chartSettings2">
                  </ve-line>
                </el-card>
              </el-col>

              <el-col :xs="24" :sm="24" :lg="8">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">平均构建成功率(DB)</div>
                </div>
                <ve-line
                  class="bgColor"
                  :colors="color" 
                  :data="avg_daily_success_rate" 
                  :extend="chartExtend"
                  :settings="chartSettings">
                </ve-line>
              </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :lg="8">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">平均构建成功率(RB)</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :colors="color"
                  :data="avg_release_success_rate" 
                  :extend="chartExtend"
                  :settings="chartSettings">
                </ve-line>
              </el-card>
            </el-col>
            </el-row>
          </div>

          <el-row class="marT" :gutter="10">
            <el-col :xs="24" :sm="24" :lg="8">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">平均构建成功率(VB)</div>
                </div>
                <ve-line
                  class="bgColor"
                  :colors="color" 
                  :data="avg_verify_success_rate" 
                  :extend="chartExtend"
                  :settings="chartSettings">
                </ve-line>
              </el-card>
            </el-col>
          </el-row>

          <div class="efficient-table">
            <el-row class="bgColor marT">
              <el-col :xs="24" :sm="24" :lg="24">
                  <div class="ibox-title pad">研发效率</div>

                  <div class="table mar">
                    <el-table
                      :data="efficientData"
                      :row-class-name="tableRowClassName"
                      :header-cell-style="{background:'#eef1f6'}"
                      style="width: 100%">
                      <el-table-column
                          align="center"
                          type="index"                                
                          label="编号"
                          width="60">
                          <template slot-scope="scope">
                              <span>{{ scope.$index + 1 + qualitySize*(qualityCurrent - 1) }}</span> 
                          </template>
                      </el-table-column>

                      <el-table-column 
                          align="center"
                          label="分类"
                          prop="classify"
                          :width="pdfStatus ? 120 : ''"
                          >                   
                      </el-table-column>

                      <el-table-column 
                          align="center"
                          label="统计指标"
                          prop="name"
                          :width="pdfStatus ? 150 : ''">
                      </el-table-column>

                      <el-table-column 
                          align="center"
                          label="公司目标"
                          :width="pdfStatus ? 120 : ''"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.company_indicator.value != 0">
                              <span v-if="scope.row.company_indicator.operator == 0">> {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                              <span v-else-if="scope.row.company_indicator.operator == 1">< {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                              <span v-else-if="scope.row.company_indicator.operator == 2">>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                              <span v-else-if="scope.row.company_indicator.operator == 3"><= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                              <span v-else>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                            </div>
                            <div v-else></div>
                          </template>
                      </el-table-column>
                      <el-table-column :label="labelChoose + '平均'" align="center">
                      <el-table-column
                          v-for="(item, idx) in efficientTable[0]" 
                          :key="idx"                         
                          align="center"
                          :label="item.month"
                          :width="pdfStatus ? 120 : ''"
                          >
                          <template slot-scope="scope">
                            <span style="color: green;" v-if="scope.row.group_indicator[idx].reach_standard">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                            <span v-else style="color: red;">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                          </template>
                      </el-table-column>
                      </el-table-column>
                      <el-table-column
                        v-if="pdfStatus"
                        fixed="right"                        
                        label="分析/建议"
                        align="center">
                        <template slot-scope="scope">
                          <el-input
                            v-if="inputStatus"
                            type="textarea"                        
                            placeholder="请输入分析/建议"
                            v-model="scope.row.comments">
                          </el-input>
                          <div v-else>{{ scope.row.comments }}</div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
              </el-col>
            </el-row>
          </div>

          <el-divider content-position="left">客户满意度</el-divider>
          <el-row class="marT" :gutter="10">
            <el-col :xs="24" :sm="24" :lg="12">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">投诉件数</div>
                </div>
                <ve-line
                  class="bgColor"
                  :colors="color" 
                  :data="customer_complaint" 
                  :extend="chartComplaint"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :lg="12">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">投诉关闭率</div>
                </div>
                <ve-line
                  class="bgColor"
                  :colors="color" 
                  :data="complaint_closed_rate" 
                  :extend="chartExtend"
                  :settings="chartSettings">
                </ve-line>
              </el-card>
            </el-col>
          </el-row>

          <div class="complaint-table">
            <el-row class="bgColor marT">
              <el-col :xs="24" :sm="24" :lg="24">
                  <div class="ibox-title pad">客户满意度</div>

                  <div class="table mar">
                    <el-table
                      :data="complaintData"
                      :row-class-name="tableRowClassName"
                      :header-cell-style="{background:'#eef1f6'}"
                      style="width: 100%">
                      <el-table-column
                          align="center"
                          type="index"                                
                          label="编号"
                          width="60">
                          <template slot-scope="scope">
                              <span>{{ scope.$index + 1 + qualitySize*(qualityCurrent - 1) }}</span> 
                          </template>
                      </el-table-column>

                      <el-table-column 
                          align="center"
                          label="分类"
                          prop="classify"
                          :width="pdfStatus ? 120 : ''">                   
                      </el-table-column>

                      <el-table-column 
                          align="center"
                          label="统计指标"
                          prop="name"
                          :width="pdfStatus ? 150 : ''">
                      </el-table-column>

                      <el-table-column 
                          align="center"
                          label="公司目标"
                          :width="pdfStatus ? 120 : ''">
                          <template slot-scope="scope">
                            <div v-if="scope.row.company_indicator.value != 0">
                              <span v-if="scope.row.company_indicator.operator == 0">> {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                              <span v-else-if="scope.row.company_indicator.operator == 1">< {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                              <span v-else-if="scope.row.company_indicator.operator == 2">>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                              <span v-else-if="scope.row.company_indicator.operator == 3"><= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                              <span v-else>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                            </div>
                            <div v-else-if="scope.row.name == '投诉件数' && scope.row.company_indicator.value != 0">
                              <span v-if="scope.row.company_indicator.operator == 0">> {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                              <span v-else-if="scope.row.company_indicator.operator == 1">< {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                              <span v-else-if="scope.row.company_indicator.operator == 2">>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                              <span v-else-if="scope.row.company_indicator.operator == 3"><= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                              <span v-else>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                            </div>
                            <div v-else></div>
                          </template>
                      </el-table-column>
                      <el-table-column :label="labelChoose + '平均'" align="center">
                      <el-table-column
                          v-for="(item, idx) in complaintTable[0]" 
                          :key="idx"                         
                          align="center"
                          :label="item.month"
                          :width="pdfStatus ? 120 : ''"
                          >
                          <template slot-scope="scope">
                            <span style="color: green;" v-if="scope.row.group_indicator[idx].reach_standard">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                            <span v-else style="color: red;">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                          </template>
                      </el-table-column>
                      </el-table-column>
                      <el-table-column
                        v-if="pdfStatus"
                        fixed="right"                        
                        label="分析/建议"
                        align="center">
                        <template slot-scope="scope">
                          <el-input
                            v-if="inputStatus"
                            type="textarea"                        
                            placeholder="请输入分析/建议"
                            v-model="scope.row.comments">
                          </el-input>
                          <div v-else>{{ scope.row.comments }}</div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      
    </el-dialog>

    <!--<el-dialog
      :title="value1 + '持续交付月报'"
      :visible.sync="table2"
      width="100%"
      style="margin: auto">
      <div>       
        <div class="marT chart-area">
          <el-row :gutter="30">
            <el-col :xs="24" :sm="24" :lg="12">
            <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">任务延期率</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :data="overdueData" 
                  :extend="chartExtend"
                  :settings="chartSettings">
                </ve-line>
            </el-card>
              
            </el-col>

            <el-col :xs="24" :sm="24" :lg="12">
            <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">git log检查一次通过率</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :data="git_log_pass_rate" 
                  :extend="chartExtend"
                  :settings="chartSettings">
                </ve-line>
            </el-card>
              
            </el-col>
          </el-row>
        </div>

        <div class="marT chart-area">
          <el-row :gutter="30"> 
            <el-col :xs="24" :sm="24" :lg="12">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">圈复杂度</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :data="complexityData" 
                  :extend="chartComplexity"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :lg="12">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">评审缺陷密度</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :data="defectData" 
                  :extend="chartDefectDensity"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col>          
          </el-row>
        </div>

        <div class="marT chart-area">
          <el-row :gutter="30">
            <el-col :xs="24" :sm="24" :lg="12">
              <el-card class="box-card m-b" shadow="never">
                  <div slot="header" class="clearfix" style="vertical-align:middle">
                    <div style="float: left; padding: 10px 0">评审有效比率</div>
                  </div>
                  <ve-line
                    class="bgColor" 
                    :data="effectiveData" 
                    :extend="chartExtend"
                    :settings="chartSettings">
                  </ve-line>
              </el-card>         
            </el-col>

            <el-col :xs="24" :sm="24" :lg="12">
              <el-card class="box-card m-b" shadow="never">
                  <div slot="header" class="clearfix" style="vertical-align:middle">
                    <div style="float: left; padding: 10px 0">Bug degrade比例</div>
                  </div>
                  <ve-line
                    class="bgColor" 
                    :data="bug_degrade_rate" 
                    :extend="chartExtend"
                    :settings="chartSettings">
                  </ve-line>
              </el-card>         
            </el-col>
          </el-row>
        </div>

        <div class="marT chart-area">
          <el-row :gutter="30">
            <el-col :xs="24" :sm="24" :lg="12">
              <el-card class="box-card m-b" shadow="never">
                  <div slot="header" class="clearfix" style="vertical-align:middle">
                    <div style="float: left; padding: 10px 0">Bug 超期未解决比例</div>
                  </div>
                  <ve-line
                    class="bgColor" 
                    :data="bug_overtime_rate" 
                    :extend="chartExtend"
                    :settings="chartSettings">
                  </ve-line>
              </el-card>         
            </el-col>

            <el-col :xs="24" :sm="24" :lg="12">
              <el-card class="box-card m-b" shadow="never">
                  <div slot="header" class="clearfix" style="vertical-align:middle">
                    <div style="float: left; padding: 10px 0">无效Bug比例</div>
                  </div>
                  <ve-line
                    class="bgColor" 
                    :data="invalid_bug_rate" 
                    :extend="chartExtend"
                    :settings="chartSettings">
                  </ve-line>
              </el-card>         
            </el-col>
          </el-row>
        </div>

        <div class="marT chart-area">
          <el-row :gutter="30">
            <el-col :xs="24" :sm="24" :lg="12">
            <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">日自动化测试执行次数(DB)</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :data="day_daily_test_count" 
                  :extend="chartComplexity"
                  :settings="chartSettings2">
                </ve-line>
            </el-card>
              
            </el-col>

            <el-col :xs="24" :sm="24" :lg="12">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">日自动化测试执行次数(VB)</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :data="day_verify_test_count" 
                  :extend="chartComplexity"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div ref="quality" class="quality-table">
          <el-row class="bgColor marT">
            <el-col :xs="24" :sm="24" :lg="24">
                <div class="ibox-title pad" @click="getPdf">研发质量</div>

                <div class="table mar">
                  <el-table
                    :data="qualityData"
                    :row-class-name="tableRowClassName"
                    :header-cell-style="{background:'#eef1f6'}"
                    style="width: 100%">
                    <el-table-column
                        align="center"
                        type="index"                                
                        label="编号"
                        width="40">
                        <template slot-scope="scope">
                            <span>{{ scope.$index + 1 + qualitySize*(qualityCurrent - 1) }}</span> 
                        </template>
                    </el-table-column>

                    <el-table-column 
                        align="center"
                        label="分类"
                        prop="classify"
                        width="120"
                        >                   
                    </el-table-column>

                    <el-table-column 
                        align="center"
                        label="统计指标"
                        prop="name"
                        width="150">
                    </el-table-column>

                    <el-table-column 
                        align="center"
                        label="公司目标"
                        width="120"
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.company_indicator.value != 0">
                            <span v-if="scope.row.company_indicator.operator == 0">> {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                            <span v-else-if="scope.row.company_indicator.operator == 1">< {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                            <span v-else-if="scope.row.company_indicator.operator == 2">>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                            <span v-else-if="scope.row.company_indicator.operator == 3"><= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                            <span v-else>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                          </div>
                          <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="labelChoose + '平均'" align="center">
                      <el-table-column
                          v-for="(item, idx) in qualityTable[0]" 
                          :key="idx"                         
                          align="center"
                          :label="item.month"
                          width="120"
                          >
                          <template slot-scope="scope">                  
                            <div>
                              <span style="color: green;" v-if="scope.row.group_indicator[idx].reach_standard">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                              <span v-else style="color: red;">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                            </div>
                          </template>
                      </el-table-column>
                    </el-table-column>

                    <el-table-column                     
                      fixed="right"
                      label="分析/建议"
                      align="center">
                      <template slot-scope="scope">                        
                        <div>{{ scope.row.comments }}</div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
            </el-col>
          </el-row>
        </div>
        
        <el-row class="marT" :gutter="30">
          <el-col :xs="24" :sm="24" :lg="12">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">代码生产率(Patch)</div>
              </div>
              <ve-line
                class="bgColor" 
                :data="patchData" 
                :extend="chartComplexity"
                :settings="chartSettings2">
              </ve-line>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :lg="12">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">代码生产率(有效代码行数)</div>
              </div>
              <ve-line
                class="bgColor" 
                :data="effectiveCodeData" 
                :extend="chartComplexity"
                :settings="chartSettings2">
              </ve-line>
            </el-card>
          </el-col>
        </el-row>

        <el-row class="marT" :gutter="30">
          <el-col :xs="24" :sm="24" :lg="12">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">缺陷解决效率(日平均)</div>
              </div>
              <ve-line
                class="bgColor" 
                :data="bugfixEffectData" 
                :extend="chartComplexity"
                :settings="chartSettings2">
              </ve-line>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :lg="12">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">缺陷解决时长(日平均)</div>
              </div>
              <ve-line
                class="bgColor" 
                :data="bugfixCostData" 
                :extend="chartComplexity"
                :settings="chartSettings2">
              </ve-line>
            </el-card>
          </el-col>
        </el-row>

        <el-row class="marT" :gutter="30">
          <el-col :xs="24" :sm="24" :lg="12">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">平均构建时长(DB)</div>
              </div>
              <ve-line
                class="bgColor" 
                :data="avg_daily_duration" 
                :extend="chartTime"
                :settings="chartSettings2">
              </ve-line>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :lg="12">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">平均构建时长(RB)</div>
              </div>
              <ve-line
                class="bgColor" 
                :data="avg_release_duration" 
                :extend="chartTime"
                :settings="chartSettings2">
              </ve-line>
            </el-card>
          </el-col>
        </el-row>

        <div class="marT">
          <el-row :gutter="30">
            <el-col :xs="24" :sm="24" :lg="12">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">平均构建时长(VB)</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :data="avg_verify_duration" 
                  :extend="chartTime"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :lg="12">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">平均构建等待时长(DB)</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :data="avg_daily_queue_time" 
                  :extend="chartTime"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div class="marT">
          <el-row :gutter="30">
            <el-col :xs="24" :sm="24" :lg="12">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">平均构建等待时长(RB)</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :data="avg_release_queue_time" 
                  :extend="chartTime"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :lg="12">
              <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">平均构建等待时长(VB)</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :data="avg_verify_queue_time" 
                  :extend="chartTime"
                  :settings="chartSettings2">
                </ve-line>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <el-row class="marT" :gutter="30">
          <el-col :xs="24" :sm="24" :lg="12">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">平均构建成功率(DB)</div>
              </div>
              <ve-line
                class="bgColor" 
                :data="avg_daily_success_rate" 
                :extend="chartExtend"
                :settings="chartSettings">
              </ve-line>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :lg="12">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">平均构建成功率(RB)</div>
              </div>
              <ve-line
                class="bgColor" 
                :data="avg_release_success_rate" 
                :extend="chartExtend"
                :settings="chartSettings">
              </ve-line>
            </el-card>
          </el-col>
        </el-row>

        <el-row class="marT" :gutter="30">
          <el-col :xs="24" :sm="24" :lg="12">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">平均构建成功率(VB)</div>
              </div>
              <ve-line
                class="bgColor" 
                :data="avg_verify_success_rate" 
                :extend="chartExtend"
                :settings="chartSettings">
              </ve-line>
            </el-card>
          </el-col>
        </el-row>

        <div class="efficient-table">
          <el-row class="bgColor marT">
            <el-col :xs="24" :sm="24" :lg="24">
                <div class="ibox-title pad">研发效率</div>

                <div class="table mar">
                  <el-table
                    :data="efficientData"
                    :row-class-name="tableRowClassName"
                    :header-cell-style="{background:'#eef1f6'}"
                    style="width: 100%">
                    <el-table-column
                        align="center"
                        type="index"                                
                        label="编号"
                        width="60">
                        <template slot-scope="scope">
                            <span>{{ scope.$index + 1 + qualitySize*(qualityCurrent - 1) }}</span> 
                        </template>
                    </el-table-column>

                    <el-table-column 
                        align="center"
                        label="分类"
                        prop="classify"
                        width="120"
                        >                   
                    </el-table-column>

                    <el-table-column 
                        align="center"
                        label="统计指标"
                        prop="name"
                        width="150">
                    </el-table-column>

                    <el-table-column 
                        align="center"
                        label="公司目标"
                        width="120"
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.company_indicator.value != 0">
                            <span v-if="scope.row.company_indicator.operator == 0">> {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                            <span v-else-if="scope.row.company_indicator.operator == 1">< {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                            <span v-else-if="scope.row.company_indicator.operator == 2">>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                            <span v-else-if="scope.row.company_indicator.operator == 3"><= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                            <span v-else>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                          </div>
                          <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="labelChoose + '平均'" align="center">
                    <el-table-column
                        v-for="(item, idx) in efficientTable[0]" 
                        :key="idx"                         
                        align="center"
                        :label="item.month"
                        width="120"
                        >
                        <template slot-scope="scope">
                          <span style="color: green;" v-if="scope.row.group_indicator[idx].reach_standard">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                          <span v-else style="color: red;">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                        </template>
                    </el-table-column>
                    </el-table-column>
                    <el-table-column                     
                      fixed="right"                        
                      label="分析/建议"
                      align="center">
                      <template slot-scope="scope">
                        <div>{{ scope.row.comments }}</div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
            </el-col>
          </el-row>
        </div>

        <el-row class="marT" :gutter="30">
          <el-col :xs="24" :sm="24" :lg="12">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">投诉件数</div>
              </div>
              <ve-line
                class="bgColor" 
                :data="customer_complaint" 
                :extend="chartComplaint"
                :settings="chartSettings2">
              </ve-line>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :lg="12">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">投诉关闭率</div>
              </div>
              <ve-line
                class="bgColor" 
                :data="complaint_closed_rate" 
                :extend="chartExtend"
                :settings="chartSettings">
              </ve-line>
            </el-card>
          </el-col>
        </el-row>

        <div class="complaint-table">
          <el-row class="bgColor marT">
            <el-col :xs="24" :sm="24" :lg="24">
                <div class="ibox-title pad">客户满意度</div>

                <div class="table mar">
                  <el-table
                    :data="complaintData"
                    :row-class-name="tableRowClassName"
                    :header-cell-style="{background:'#eef1f6'}"
                    style="width: 100%">
                    <el-table-column
                        align="center"
                        type="index"                                
                        label="编号"
                        width="60">
                        <template slot-scope="scope">
                            <span>{{ scope.$index + 1 + qualitySize*(qualityCurrent - 1) }}</span> 
                        </template>
                    </el-table-column>

                    <el-table-column 
                        align="center"
                        label="分类"
                        prop="classify"
                        width="120">                   
                    </el-table-column>

                    <el-table-column 
                        align="center"
                        label="统计指标"
                        prop="name"
                        width="150">
                    </el-table-column>

                    <el-table-column 
                        align="center"
                        label="公司目标"
                        width="120">
                        <template slot-scope="scope">
                          <div v-if="scope.row.company_indicator.value != 0">
                            <span v-if="scope.row.company_indicator.operator == 0">> {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                            <span v-else-if="scope.row.company_indicator.operator == 1">< {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                            <span v-else-if="scope.row.company_indicator.operator == 2">>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                            <span v-else-if="scope.row.company_indicator.operator == 3"><= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                            <span v-else>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                          </div>
                          <div v-else-if="scope.row.name == '投诉件数' && scope.row.company_indicator.value != 0">
                            <span v-if="scope.row.company_indicator.operator == 0">> {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                            <span v-else-if="scope.row.company_indicator.operator == 1">< {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                            <span v-else-if="scope.row.company_indicator.operator == 2">>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                            <span v-else-if="scope.row.company_indicator.operator == 3"><= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                            <span v-else>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                          </div>
                          <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="labelChoose + '平均'" align="center">
                    <el-table-column
                        v-for="(item, idx) in complaintTable[0]" 
                        :key="idx"                         
                        align="center"
                        :label="item.month"                        
                        width="120">
                        <template slot-scope="scope">
                          <span style="color: green;" v-if="scope.row.group_indicator[idx].reach_standard">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                          <span v-else style="color: red;">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                        </template>
                    </el-table-column>
                    </el-table-column>
                    <el-table-column                      
                      fixed="right"                        
                      label="分析/建议"
                      align="center">
                      <template slot-scope="scope">
                        <div>{{ scope.row.comments}}</div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
            </el-col>
          </el-row>
        </div>        
      </div>
    </el-dialog>-->
  </div>
</template>

<script>
import { getHeader } from '@/app.config'
import { removeToken, removeName } from '@/utils/auth'
import http from '@/views/sys/axios'
import { mapState, mapMutations } from 'vuex'
// import htmlToPdf from '@/utils/buildPdf'
// import Vue from 'vue'
// Vue.use(htmlToPdf) 

export default {
  data() {
    this.chartExtend = {
      series: {      
        itemStyle : { 
          normal: {
            label : {
              show: true
            }
          }
        },
        label: {
          normal: {
            formatter: function(data) {  
              return (data.value[1]*100).toFixed(2) + '%'            
              // if(data.seriesName == '圈复杂度' || data.seriesName == '评审有效比率') {
              //   return data.value[1]
              // } else if(data.seriesName == '评审缺陷密度') {
              //   return data.value[1] + '个/KLOC'
              // } else if(data.seriesName == '日自动化测试执行次数(VB)' || data.seriesName == '日自动化测试执行次数(DB)') {
              //   return data.value[1] + '次'
              // } else if(data.seriesName == '代码生产率(Patch)' || data.seriesName == '缺陷解决效率(每天平均)') {
              //   return data.value[1] + '个/天'
              // } else if(data.seriesName == '代码生产率(有效代码行数)') {
              //   return data.value[1] + '行/天'
              // } else if(data.seriesName == '缺陷解决时长(每件平均)') {
              //   return data.value[1] + '天/个'
              // } else if(data.seriesName == '平均构建时长(VB)' || data.seriesName == '平均构建时长(DB)' || data.seriesName == '平均构建时长(RB)' || data.seriesName == '平均构建等待时长(VB)' || data.seriesName == '平均构建等待时长(DB)' || data.seriesName == '平均构建等待时长(RB)') {
              //   return this.formatter('time', data.value[1])                
              // } else if(data.seriesName == '投诉件数') {
              //   return data.value[1] + '件'
              // } else {
              //   console.log(data)
                
              // }                         
            }
          }
        }
      }
    }
    this.chartComplexity = {
      series: {      
        itemStyle : { 
          normal: {
            label : {
              show: true
            }
          }
        },
        label: {
          normal: {
            formatter: function(data) {  
              return data.value[1]                                                 
            }
          }
        }
      }
    }
    this.chartDefectDensity  = {
      series: {      
        itemStyle : { 
          normal: {
            label : {
              show: true
            }
          }
        },
        label: {
          normal: {
            formatter: function(data) {  
              return data.value[1]                                                
            }
          }
        }
      }
    }
    this.chartTime = {
      series: {      
        itemStyle : { 
          normal: {
            label : {
              show: true
            }
          }
        },
        label: {
          normal: {
            formatter: function(data) { 
              let value = data.value[1]
              if (isNaN(value)) {
                value = 0
              }
              let theTime = parseInt(value) // 秒
              let theTime1 = 0 // 分
              let theTime2 = 0 // 小时
              let theTime3 = 0 // 天
              if (theTime > 60) {
                theTime1 = parseInt(theTime / 60)
                theTime = parseInt(theTime % 60)
                if (theTime1 > 60) {
                  theTime2 = parseInt(theTime1 / 60)
                  theTime1 = parseInt(theTime1 % 60)
                  if (theTime2 > 24) {
                    theTime3 = parseInt(theTime2 / 24)
                    theTime2 = parseInt(theTime2 % 24)
                  }
                }
              }
              let result = '' + parseInt(theTime) + '秒'
              if (theTime1 > 0) {
                result = '' + parseInt(theTime1) + '分' + result
              }
              if (theTime2 > 0) {
                result = '' + parseInt(theTime2) + '时' + result
              }
              if (theTime3 > 0) {
                result = '' + parseInt(theTime3) + '天' + result
              } 
              return result                                                         
            }
          }
        }
      }
    }
    this.chartComplaint = {
      series: {      
        itemStyle : { 
          normal: {
            label : {
              show: true
            }
          }
        },
        label: {
          normal: {
            formatter: function(data) {               
              if(data.seriesName.indexOf('率') >= 0) {
                return (data.value[1]).toFixed(2) + '%'
              } else {
                return data.value[1] + '件'
              }                                                              
            }
          }
        }
      }
    }
    var validatePercent = (rule, value, callback) => {
      if (!(/^(\d{1,2}(\.\d{1,5})?|100)$/).test(value)) {
        this.error = true
        callback(new Error('请输入正确的百分数'));
      } else {
        this.error = false
        callback()
      }
    };
    var validateNum = (rule, value, callback) => {
      if (!(/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/).test(value)) {
        this.error = true
        callback(new Error('请输入正确的数字'));
      } else {
        this.error = false
        callback()
      }
    };
    return {
      devops_suggest: '',
      project_suggest: '',
      imgUrl: require('../../assets/top.png'),
      error: false,
      isShowTop: false,
      isSend: false,
      ruleForm: {
        rules: {
          percent: [
            { validator: validatePercent, trigger: 'change' }
          ],
          number: [
            { validator: validateNum, trigger: 'change' }
          ]
        }
      },
      lineChartData: {
        columns: ['date', 'count'],
        rows: []
      },
      lineChartSettings: {
        labelMap: {'date': '月份', 'count': '数量(个)'}
      },
      pdfStatus: false,
      content: '',
      inputStatus: false,
      initTableList: [],
      tableSize: 10,
      tableCurrent: 1,
      tableTotal: 0,
      table: false,
      table2: false,
      dialogVisible: false,
      textarea1: '',
      radio: 1,
      value1: '',
      time: '',
      pickerOptions: {
        disabledDate(time) {
          let curDate = (new Date()).getTime()
          let year = 326 * 24 * 3600 * 1000
          let maxTime = curDate + year
          let minTime = curDate - year
          return time.getTime() > maxTime || time.getTime()<minTime || time.getTime() > Date.now()
          // return time.getTime() > Date.now() || time.getTime() < yearMonths
        }
      },
      recall: '',
      devops_month_trend: {
        columns: ['date', 'devops_new_counts', 'gerrit_new_counts', 'pms_new_counts', 'period_new_counts', 'customer_new_counts', 'autotest_new_counts', 'knowledge_community_counts'],
        rows: []
      },
      devopsLineLoading: false,
      devopsLineEmpty: false,
      isCompany: true, // 看公司的权限
      targetValue: '任务延期率', // 趋势图选择
      targetData: {
        columns: ['month', 'company_indicator', 'actual_indicator'],
        rows: []
      },
      overdueData: {
        columns: ['month', 'task_overdue_avg_project', 'task_overdue_avg_project_indicator'],
        rows: []
      },
      git_log_pass_rate: {
        columns: ['month', 'git_log_pass_rate', 'git_log_pass_rate_indicator'],
        rows: []
      },
      complexityData: {
        columns: ['month', 'avg_complexity', 'avg_complexity_indicator'],
        rows: []
      },
      defectData: {
        columns: ['month', 'defect_density', 'defect_density_indicator'],
        rows: []
      },
      effectiveData: {
        columns: ['month', 'effective_ratio', 'effective_ratio_indicator'],
        rows: []
      },
      bug_degrade_rate: {
        columns: ['month', 'bug_degrade_rate', 'bug_degrade_rate_indicator'],
        rows: []
      },
      bug_overtime_rate: {
        columns: ['month', 'bug_overtime_rate', 'bug_overtime_rate_indicator'],
        rows: []
      },
      invalid_bug_rate: {
        columns: ['month', 'invalid_bug_rate', 'invalid_bug_rate_indicator'],
        rows: []
      },
      day_daily_test_count: {
        columns: ['month', 'day_daily_test_count', 'day_daily_test_count_indicator'],
        rows: []
      },
      day_verify_test_count: {
        columns: ['month', 'day_verify_test_count', 'day_verify_test_count_indicator'],
        rows: []
      },   
      patchData: {
        columns: ['month', 'avg_daily_patch_count', 'avg_daily_patch_count_indicator'],
        rows: []
      },
      effectiveCodeData: {
        columns: ['month', 'avg_daily_effective_code', 'avg_daily_effective_code_indicator'],
        rows: []
      },
      bugfixEffectData: {
        columns: ['month', 'bugfix_effective', 'bugfix_effective_indicator'],
        rows: []
      },
      bugfixCostData: {
        columns: ['month', 'bugfix_cost', 'bugfix_cost_indicator'],
        rows: []
      },
      avg_daily_duration: {
        columns: ['month', 'avg_daily_duration', 'avg_daily_duration_indicator'],
        rows: []
      },
      avg_release_duration: {
        columns: ['month', 'avg_release_duration', 'avg_release_duration_indicator'],
        rows: []
      },
      avg_verify_duration: {
        columns: ['month', 'avg_verify_duration', 'avg_verify_duration_indicator'],
        rows: []
      },

      avg_daily_queue_time: {
        columns: ['month', 'avg_daily_queue_time', 'avg_daily_queue_time_indicator'],
        rows: []
      },
      avg_release_queue_time: {
        columns: ['month', 'avg_release_queue_time', 'avg_release_queue_time_indicator'],
        rows: []
      },
      avg_verify_queue_time: {
        columns: ['month', 'avg_verify_queue_time', 'avg_verify_queue_time_indicator'],
        rows: []
      },
      avg_daily_success_rate: {
        columns: ['month', 'avg_daily_success_rate', 'avg_daily_success_rate_indicator'],
        rows: []
      },
      avg_release_success_rate: {
        columns: ['month', 'avg_release_success_rate', 'avg_release_success_rate_indicator'],
        rows: []
      },
      avg_verify_success_rate: {
        columns: ['month', 'avg_verify_success_rate', 'avg_verify_success_rate_indicator'],
        rows: []
      },
      customer_complaint: {
        columns: ['month', 'customer_complaint', 'customer_complaint_indicator'],
        rows: []
      },
      complaint_closed_rate: {
        columns: ['month', 'complaint_closed_rate', 'complaint_closed_rate_indicator'],
        rows: []
      },
      chartSettings: {
        yAxisType: ['percent'],
        labelMap: {
          company_indicator: '公司目标值',
          actual_indicator: '任务延期率',
          task_overdue_avg_project: '实际值',
          task_overdue_avg_project_indicator: '目标值',
          git_log_pass_rate: '实际值',
          git_log_pass_rate_indicator: '目标值',
          avg_selfcheck_pass_rate_indicator: '目标值',
          defect_density: '实际值',
          effective_ratio: '实际值',
          effective_ratio_indicator: '目标值',
          bug_degrade_rate: '实际值',
          bug_degrade_rate_indicator: '目标值',
          bug_overtime_rate: '实际值',
          bug_overtime_rate_indicator: '目标值',
          invalid_bug_rate: '实际值',
          invalid_bug_rate_indicator: '目标值',
          avg_selfcheck_pass_rate: '实际值',
          day_verify_test_count: '实际值',
          day_daily_test_count: '实际值',
          avg_daily_patch_count: '实际值',
          avg_daily_effective_code: '实际值',
          bugfix_effective: '实际值',
          bugfix_cost: '实际值',
          avg_verify_success_rate: '实际值',
          avg_daily_success_rate: '实际值',
          avg_release_success_rate: '目标值(RB)',
          avg_verify_success_rate_indicator: '目标值(VB)',
          avg_daily_success_rate_indicator: '目标值(DB)',
          avg_release_success_rate_indicator: '实际值',          
          complaint_closed_rate_indicator: '目标值',
          complaint_closed_rate: '实际值'
        }
      },
      chartSettings2: {
        labelMap: {
          company_indicator: '公司目标值',
          actual_indicator: '任务延期率',
          task_overdue_avg_project: '实际值',
          git_log_pass_rate: '实际值',
          avg_complexity: '实际值',
          avg_complexity_indicator: '目标值',
          defect_density: '实际值(个/KLOC)',
          defect_density_indicator: '目标值(个/KLOC)',
          effective_ratio: '实际值',
          bug_degrade_rate: '实际值',
          bug_overtime_rate: '实际值',
          avg_selfcheck_pass_rate: '实际值',
          day_daily_test_count: '实际值',
          day_daily_test_count_indicator: '目标值',
          day_verify_test_count: '实际值',
          day_verify_test_count_indicator: '目标值',
          avg_daily_patch_count: '实际值(个/天)',
          avg_daily_patch_count_indicator: '目标值(个/天)',
          avg_daily_effective_code: '实际值(行/天)',
          avg_daily_effective_code_indicator: '目标值(行/天)',
          bugfix_effective: '实际值(个/天)',
          bugfix_effective_indicator: '目标值(个/天)',
          bugfix_cost: '实际值(天/个)',
          bugfix_cost_indicator: '目标值(天/个)',
          avg_verify_duration: '实际值',
          avg_verify_duration_indicator: '目标值',
          avg_daily_duration: '实际值',
          avg_daily_duration_indicator: '目标值',
          avg_release_duration: '实际值',
          avg_release_duration_indicator: '目标值',
          avg_verify_queue_time: '实际值',
          avg_daily_queue_time: '实际值',
          avg_release_queue_time: '实际值',
          avg_verify_queue_time_indicator: '目标值',
          avg_daily_queue_time_indicator: '目标值',
          avg_release_queue_time_indicator: '目标值',        
          customer_complaint: '实际值',
          customer_complaint_indicator: '目标值',          
        }
      },
      color: ['#409eff', '#42b983'],
      lineData1: {
        columns: ['month', 'task_overdue_avg_project', 'git_log_pass_rate', 'avg_selfcheck_pass_rate'],
        rows: []
      },
      isout: true,
      targetSelect: [],
      is_created: false,
      labelChoose: '集团',
      qualitySize: 10,
      qualityCurrent: 1,
      efficientData: [], // 研发效率数据
      efficientTable: [],
      complaintData: [], // 客户满意度数据
      complaintTable: [],
      qualityData: [], // 研发质量数据      
      selectedGroup: '', // 事业群选择
      groupId: '', // 事业群Id
      group_selector: [], // 事业群下拉初始数据
      qualityTable: [],
      dataZoom: [{
        type: 'slider',
        start: 0,
        end: 100
      }],
      settings: {
        labelMap: {
          count: '已导入项目(符合条件)',                    
          cover_rate: '导入覆盖率(%)',
          devops_new_counts: '持续集成系统(个)',
          pms_new_counts: '项目管理系统(个)',
          gerrit_new_counts: '代码管理系统(个)',
          period_new_counts: '阶段点评审系统(个)',
          customer_new_counts: '客户投诉系统(个)',
          autotest_new_counts: '自动化测试管理系统(个)',
          knowledge_community_counts: '知识社区(个)'
        }
      }
    }
  },
  created() {
    this.initData()
  },
  // computed: {
  //   ...mapState({
  //     pdfStatus: state => state.pdfStatus,
  //     inputStatus: state => state.inputStatus
  //   })
  // },
  mounted() {
    this.$nextTick(() => {        
    })
  },
  methods: {
    // ...mapMutations([
    //   'setpdfStatus',
    //   'setinputStatus'
    // ]),
    formatter(type, value) { // 数据过滤器
      if(type === 'percent') {
        return Number(value * 100).toFixed(2) + '%' || '0.00%'
      } else if(type === 'time') {
        if (isNaN(value)) {
          value = 0
        }
        let theTime = parseInt(value) // 秒
        let theTime1 = 0 // 分
        let theTime2 = 0 // 小时
        let theTime3 = 0 // 天
        if (theTime > 60) {
          theTime1 = parseInt(theTime / 60)
          theTime = parseInt(theTime % 60)
          if (theTime1 > 60) {
            theTime2 = parseInt(theTime1 / 60)
            theTime1 = parseInt(theTime1 % 60)
            if (theTime2 > 24) {
              theTime3 = parseInt(theTime2 / 24)
              theTime2 = parseInt(theTime2 % 24)
            }
          }
        }
        let result = '' + parseInt(theTime) + '秒'
        if (theTime1 > 0) {
          result = '' + parseInt(theTime1) + '分' + result
        }
        if (theTime2 > 0) {
          result = '' + parseInt(theTime2) + '时' + result
        }
        if (theTime3 > 0) {
          result = '' + parseInt(theTime3) + '天' + result
        }
        return result
      } else if(type === 'KLOC') {
        return `${value}个/Kloc` || '0个/Kloc'
      } else if(type === '次') {
        return `${value}次` || '0次'
      } else if(type === '个/天') {
        return `${value}个/天` || '0个/天'
      } else if(type === '行/天') {
        return `${value}行/天` || '0行/天'
      } else if(type === '天/个') {
        return `${value}天/个` || '0天/个'
      } else {
        return value || 0
      }
    },
    lineFormatter(type, value) { // 表图数据过滤器
      if(type === 'percent') {
        return Math.round(value * 100) || 0.00
      } else if(type === 'time') {
        if (isNaN(value)) {
          value = 0
        }
        
        return value
      } else {
        return value || 0
      }
    },
    tableCurrentChange(val) {
      this.tableCurrent = val
    },
    tableSizeChange(val) {
      this.tableSize = val
    },
    toTop() {
      this.$refs.top.scrollIntoView({behavior: "smooth"})
      this.isShowTop = false
    },
    sendWay(id) {
      http.post(`/api/report/delivery/${id}/send?report_type=1`, {})
      .then(res => {
        if(res.code == 200) {
          this.$message({
            message: '发送成功',
            type: 'success'
          });
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    changeTime() {
      this.value1 ? this.time = this.value1 : this.time = ''
      // this.lineData()
      // this.quality()
      // this.efficiency()
      // this.complaint()
      this.initTable()
      if(!this.isout) {
        this.toNewReport()
        this.totalLineData()
      }
    },
    tableRowClassName(row, index) {
      row.index = index
    },
    toNewReport() {
      this.is_created = 1
      this.isout = false
      this.details()
      this.totalLineData()
      this.getDevopsTable()
      this.getProjTrend()
      this.table = true
    },
    getDevopsTable() {
      this.devopsLineLoading = true
      this.devops_month_trend.rows = []
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/getsysimportinfo?groupId=${this.groupId}&time=${this.time}`, {headers: getHeader()})
      .then(res => {
          if(res.status === 200) {
              if(res.data.code === 200) {
                  this.devopsLineLoading = false
                  res.data.asc_month_trend && res.data.asc_month_trend.length ? this.devopsLineEmpty = false : this.devopsLineEmpty = true
                  this.devops_month_trend.rows = res.data.asc_month_trend
              } else {
                  this.devopsLineLoading = true
                  this.devopsLineEmpty = true
              }
          }
      }).catch(error => {
          console.log(error)
      })
    },
    getProjTrend() {
      http.get(`/api/base/project_stats?groupId=${this.groupId}&time=${this.time}`)
      .then(res => {
        if(res.code === 200) {
          this.lineChartData.rows = res.imported_trend
        }
      })
    },
    details() {
      http.get(`/api/report/delivery/data?groupId=${this.groupId}&time=${this.time}&is_created=${this.is_created}`)
      .then(response => {
        if(response.code == 200) {
          let res = response.data
          this.content = res.contents
          this.project_suggest = res.project_suggest
          this.devops_suggest = res.devops_suggest
          this.qualityData = res.develop_quality
          this.qualityTable = this.qualityData.map(item => {
            return item.group_indicator
          })
          this.efficientData = res.develop_efficient
          this.efficientTable = this.efficientData.map(item => {
            return item.group_indicator
          })
          this.complaintData = res.customer_satisfaction
          this.complaintTable = this.complaintData.map(item => {
            return item.group_indicator
          })      
        }
      })
    },
    toDetails(id) {
      let group = this.group_selector.filter(item => item.value === this.groupId)  
      let groupName
      if(group.length) {
        groupName = group[0].label
      } else {
        groupName = '集团'
      }
      
      this.$router.push({
        path: `/details`,
        query: { id, groupId: groupName, groupName: this.groupId, time: this.time}
      })
    },
    async save() {
      let data = this.qualityData.map(val => {
        var value 
        val.group_indicator.forEach((item, index) => {
          if(index == val.group_indicator.length - 1) {
            value = item.value
          }
        })
        return {
          classify: val.classify,
          name: val.name,
          values: value,
          comments: val.comments
        }
      })      
      let data1 =  this.efficientData.map(val => {
        let value 
        val.group_indicator.forEach((item, index) => {
          if(index == val.group_indicator.length - 1) {
            value = item.value
          }
        })
        data.push({
          classify: val.classify,
          name: val.name,
          values: value,
          comments: val.comments
        }) 
      })
      
      let data2 =  this.complaintData.map(val => {
        let value 
        val.group_indicator.forEach((item, index) => {
          if(index == val.group_indicator.length - 1) {
            value = item.value
          }
        })
        data.push({
          classify: val.classify,
          name: val.name,
          values: value,
          comments: val.comments
        })
      })      
      const obj = {
        detail_data: data,
        project_suggest: this.project_suggest,
        devops_suggest: this.devops_suggest,
        contents: this.content
      }
      return new Promise((resolve, reject) => {
        http.post(`/api/report/delivery/data?groupId=${this.groupId}&time=${this.time}`, obj)
        .then(res => {
          resolve(res)
        })
      })      
    },
    async initSave() {
      this.table = false
      let res = await this.save()
      if(res.code == 200) {
        this.$message({
          message: '保存成功，已入库!',
          type: 'success'
        });
        this.initTable()
      } else {
        this.$message({
          message: res.msg,
          type: 'warning'
        });
      }
    },
    initTable() {
      http.get(`api/report/delivery/list?groupId=${this.groupId}&time=${this.time}`)
      .then(res => {
        if(res.code == 200) {
          this.initTableList = res.report_list
          this.tableTotal = this.initTableList.length
        }
      })
    },
    initData() {
      this.select()
      this.initTable()
      // this.totalLineData()
    },
    exchange() {
      this.lineData()
      this.$refs.vline.echarts.resize()
    },
    boforePdf() {
      this.pdfStatus = true
      this.inputStatus = true
      // this.setpdfStatus(true)
      // this.setinputStatus(true)
      this.$message({
        message: '请您填写相关的分析/建议!',
        type: 'warning'
      })
      let top = this.$refs.quality.offsetTop
      this.$refs.quality.scrollIntoView({behavior: "smooth"})
      this.isShowTop = true
    },
    select() { // 头部事业群筛选框
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/account/personal_group_dept`, {headers: getHeader()})
        .then((res) => {
          if(res.data.code === 200) {
            this.group_selector = res.data.group_info
            this.selectedGroup = this.group_selector[0].label
            this.isCompany = res.data.view_company
          } else if (res.data.code == 401) {
            removeToken()
            removeName()
            this.$message.error('登陆超时或该账号已被登出，请您重新登录');
            this.$router.push({
                path: '/#/login'
            })
          }
        })
    },
    totalLineData() {
      http.get(`/api/report/delivery/trend?groupId=${this.groupId}&time=${this.time}&is_created=${this.is_created}`)
      .then(res => {
        if(res.code === 200) {
          this.overdueData.rows = res.indicator_trend.task_overdue_avg_project
          this.git_log_pass_rate.rows = res.indicator_trend.git_log_pass_rate
          this.complexityData.rows = res.indicator_trend.avg_complexity
          this.defectData.rows = res.indicator_trend.defect_density
          this.effectiveData.rows = res.indicator_trend.effective_ratio
          this.bug_degrade_rate.rows = res.indicator_trend.bug_degrade_rate
          this.bug_overtime_rate.rows = res.indicator_trend.bug_overtime_rate
          this.invalid_bug_rate.rows = res.indicator_trend.invalid_bug_rate
          this.day_daily_test_count.rows = res.indicator_trend.day_daily_test_count
          this.day_verify_test_count.rows = res.indicator_trend.day_verify_test_count
          this.patchData.rows = res.indicator_trend.avg_daily_patch_count
          this.effectiveCodeData.rows = res.indicator_trend.avg_daily_effective_code
          this.bugfixEffectData.rows = res.indicator_trend.bugfix_effective
          this.bugfixCostData.rows = res.indicator_trend.bugfix_cost
          this.avg_daily_duration.rows = res.indicator_trend.avg_daily_duration
          this.avg_release_duration.rows = res.indicator_trend.avg_release_duration
          this.avg_verify_duration.rows = res.indicator_trend.avg_verify_duration

          this.avg_daily_queue_time.rows = res.indicator_trend.avg_daily_queue_time
          this.avg_release_queue_time.rows = res.indicator_trend.avg_release_queue_time
          this.avg_verify_queue_time.rows = res.indicator_trend.avg_verify_queue_time
          this.avg_daily_success_rate.rows = res.indicator_trend.avg_daily_success_rate
          this.avg_release_success_rate.rows = res.indicator_trend.avg_release_success_rate
          this.avg_verify_success_rate.rows = res.indicator_trend.avg_verify_success_rate
          this.complaint_closed_rate.rows = res.indicator_trend.complaint_closed_rate
          this.customer_complaint.rows = res.indicator_trend.customer_complaint
        }
      })
    },
    lineData() { // 趋势图数据
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/devops/report/trend?groupId=${this.groupId}&name=${this.targetValue}&time=${this.time}`, {headers: getHeader()})
      .then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            // this.targetValue = res.data.indicator_names[0]
            this.targetSelect = res.data.indicator_names
            // res.data.indicator_trend.forEach(val => {
            //   val.company_indicator = this.lineFormatter(val.indicator_type, val.company_indicator)
            //   val.actual_indicator = this.lineFormatter(val.indicator_type, val.actual_indicator)
            // })
            res.data.indicator_trend.forEach(val => {
              val.a = 12
              val.b = 15
            })
            this.targetData.rows = res.data.indicator_trend
          }
        }
      })
    },
    quality() { // 研发质量
      this.qualityData = []
      this.qualityTable = []
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/develop/quality?groupId=${this.groupId}&time=${this.time}`, {headers: getHeader()}).then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            let list = []
            if(res.data.data[0].group_indicator.length > 6) {
              list = res.data.data[0].group_indicator.slice(res.data.data[0].group_indicator.length - 6, res.data.data[0].group_indicator.length - 1)
              res.data.data[0].group_indicator = list
            }          
            this.qualityData = res.data.data
            this.qualityTable = this.qualityData.map(item => {
              return item.group_indicator
            })           
          }
        }
      })
      
    },
    efficiency() { // 研发效率
      this.efficientData = []
      this.efficientTable = []
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/develop/efficient?groupId=${this.groupId}&time=${this.time}`, {headers: getHeader()}).then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            this.efficientData = res.data.data
            this.efficientTable = this.efficientData.map(item => {
              return item.group_indicator
            })
          }
        }
      })
    },
    complaint() { // 客户投诉
      this.complaintData = []
      this.complaintTable = []
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/customer/complaint?groupId=${this.groupId}&time=${this.time}`, {headers: getHeader()}).then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            this.complaintData = res.data.data
            this.complaintTable = this.complaintData.map(item => {
              return item.group_indicator
            })
          }
        }
      })
    }
  },
  watch: {
    isCompany(bool) {
      if(!bool) this.radio = 2      
    },
    table(bool) {
      if(bool === false) {
        this.isout = true   
        this.pdfStatus = false
        this.inputStatus = false  
      }
    },
    selectedGroup(val) {
      if(this.radio == 2) { 
        this.group_selector.forEach(value => {
          if(value.value == val) {
            this.labelChoose = value.label
            this.groupId = value.value
            this.recall = value.value
            this.initTable()
            if(!this.isout) {
              // this.totalLineData()
              this.toNewReport()
            }      
          }
        })             
      }
    },
    // 'targetData.rows': {
    //   handler: function() {
    //     //this.chartSettings.labelMap.actual_indicator = this.targetValue
    //     if(this.targetData.rows[0].indicator_type == 'percent') {
    //       this.chartSettings.labelMap.actual_indicator = this.targetValue
    //       this.chartSettings.labelMap.company_indicator = '公司目标值'
    //     } else if(this.targetData.rows[0].indicator_type == '次') {
    //       this.chartSettings.yAxisType = []
    //       this.chartSettings.labelMap.actual_indicator = this.targetValue + '(次)'
    //       this.chartSettings.labelMap.company_indicator = '公司目标值(次)'
    //     } else if(this.targetData.rows[0].indicator_type == '个/天') {
    //       this.chartSettings.yAxisType = []
    //       this.chartSettings.labelMap.actual_indicator = this.targetValue + '(个/天)'
    //       this.chartSettings.labelMap.company_indicator = '公司目标值(个/天)'
    //     } else if(this.targetData.rows[0].indicator_type == '行/天') {
    //       this.chartSettings.yAxisType = []
    //       this.chartSettings.labelMap.actual_indicator = this.targetValue + '(行/天)'
    //       this.chartSettings.labelMap.company_indicator = '公司目标值(行/天)'
    //     } else if(this.targetData.rows[0].indicator_type == '天/个') {
    //       this.chartSettings.yAxisType = []
    //       this.chartSettings.labelMap.actual_indicator = this.targetValue + '(天/个)'
    //       this.chartSettings.labelMap.company_indicator = '公司目标值(天/个)'
    //     } else if(this.targetData.rows[0].indicator_type == 'time') {
    //       this.chartSettings.yAxisType = []
    //       this.chartSettings.labelMap.actual_indicator = this.targetValue + '(秒)'
    //       this.chartSettings.labelMap.company_indicator = '公司目标值(秒)'
    //     } else if(this.targetData.rows[0].indicator_type == '个/KLOC') {
    //       this.chartSettings.yAxisType = []
    //       this.chartSettings.labelMap.actual_indicator = this.targetValue + '(个/KLOC)'
    //       this.chartSettings.labelMap.company_indicator = '公司目标值(个/KLOC)'
    //     } else {
    //       this.chartSettings.yAxisType = []
    //       this.chartSettings.labelMap.actual_indicator = this.targetValue
    //       this.chartSettings.labelMap.company_indicator = '公司目标值'
    //     }
      
    //   },
    //   deep: true
    // },
    radio(r) {
      if(r == 2) {   
        this.isSend = true    
        this.labelChoose = this.selectedGroup
        if(this.recall == '') {
          this.groupId = this.group_selector[0].value
        } else {
          this.groupId = this.recall
        }
        this.initTable()        
        if(!this.isout) {
          // this.totalLineData()
          this.toNewReport()
        }
      } else {
        this.labelChoose = '集团'
        this.isSend = false
        this.groupId = ''
        this.initTable()
        if(!this.isout) {
          // this.totalLineData()
          this.toNewReport()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../assets/common/common.scss';
  /deep/ .el-table th.gutter{
    display: table-cell!important;
  }
  /deep/ .el-dialog {
    background-color: #eeeeee;
  }
  /deep/ .el-divider__text {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    background-color: #e6a23c;
    padding: 6px 16px;
  }
  /deep/ .el-divider--horizontal {
    margin: 40px 0;
    height: 2px;
  }
  #wrapper{
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
  }
  .box{
    display: flex;
    div{
      margin: auto;
    }
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .toTop{
    position: fixed;
    bottom: 80px;
    right: 25px;
    z-index: 10;
  }
  .details{
    color: #1890ff;
    text-decoration: underline;
    cursor: pointer;
  }
  .choose{
      padding: 20px 0;
      .flex-box{
        display: flex;
        flex-wrap: nowrap;
        .flexEl{
          flex:1;
          margin: auto;           
        }
        .text-align{
          text-align: center;
        }
        .el{
          flex: 0 0 90%;
         }
      }
      .time{
        position: absolute;
        top: 20px;
        right: 41%;
        font-size: 14px;
        color: #606266;
      }
      .newReport{
        position: absolute;
        top: 20px;
        right: 20px;
      }
    }
  .border{
      box-sizing: content-box;
      height: 0;
      overflow: visible;
      margin-top: 1rem;
      margin-bottom: 1rem;
      border: 0;
      border-top: 1px solid rgba(0,0,0,.1);
  }
  .primary{
      color: #409EFF;
      font-size: 30px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 400;
  }
  .bgColor{
      background: #fff;
  }
  .pad{
      padding: 0 20px;
      padding-top: 20px;
  }
  .marT{
      margin-top: 20px;
  }
  .btn-group{
    text-align: right;
  }
  .mar{
        margin: 0 20px;
        margin-top: 20px;
    }
  .table{
      padding-bottom: 10px;
  }
</style>